<template>
    <div class="shop-mask" v-if="specModal" @click="hideModal">
      <div class="shop-spec-modal" @click.stop.prevent>
        <div class="loading" v-if="!goods.data">
          <img src="../../assets/loding.gif" alt="">
        </div>
        <div v-if="goods.data">
          <div class="modal-header">
            <div class="p-tit">{{goods.data.goName}}</div>
            <div class="dl" :class="{flex: goods.data.spSnNum==0}">
              <div class="dt">商品规格：</div>
              <div class="dd" v-if="goods.data.spSnNum==0">{{goods.unit}}</div>
              <div class="dd" v-if="goods.data.spSnNum>0">
                <a class="label" v-for="(item,index) in goods.spec" :class="{select: index==guigeIndex}"
                   @click="changeGuige(item.spSn, item.spPrice,index)">{{item.spName}}</a>
              </div>
            </div>
            <div class="dl" v-if="goods.data.goType==1||goods.data.goType==4">
              <div class="dt">收货时间:</div>
              <div class="dd">
                <a v-if="goods.data.goDelDateType==1" class="label" :class="{'select': goDeliveryDate =='周三'}"
                   @click="goDeliveryDate='周三'">每周三发货</a>
                <a v-if="goods.data.goDelDateType==2" class="label" :class="{'select': goDeliveryDate =='周一'}"
                   @click="goDeliveryDate='周一'">每周一发货</a>
                <a class="label" :class="{'select': goDeliveryDate =='周六'}" @click="goDeliveryDate='周六'">每周六发货</a>
              </div>
            </div>
          </div>
          <div class="modal-bottom" >
            <div class="p-price">
              ¥{{goPrice || goods.data.goPrice }}
            </div>
            <button class="p-btn" @click="addCart">加入购物车</button>
          </div>
          <div class="p-close" @click="hideModal"><icon symbol="close"> </icon></div>
        </div>
      </div>
    </div>
</template>

<script lang="babel">
  import Icon from '@components/icon.vue'
  import {mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters({
        specModal: 'backend/shop/specModal',
        goods: 'backend/shop/getGoods',
      })
    },
    data() {
      return {
        spSn: '',
        guigeIndex: 0,
        goPrice: 0,
        goDeliveryDate: '',
      }
    },
    methods: {
      hideModal() {
        this.$store.dispatch('backend/shop/modal', false);
        this.spSn = '';
        this.guigeIndex = 0;
        this.goPrice = 0;
        this.goDeliveryDate = '';
      },
      changeGuige: function (spSN, spPrice, index) {
        this.spSn = spSN
        this.goPrice = spPrice
        this.guigeIndex = index
      },
      addCart() {
        if(!this.goDeliveryDate && (this.goods.data.goType === 1 || this.goods.data.goType === 4)) {
          this.$store.dispatch('global/toast', '请选择发货日期');
          return
        }
        let goods = {
          goSn: this.goods.data.goSn,
          goNum: 1,
          goClaId: this.goods.data.goClaId,
          goName: this.goods.data.goName,
          goPrice: this.goPrice || this.goods.data.goPrice,
          spSn: this.spSn || this.goods.spec[0].spSn,
          spSnName: this.goods.spec[this.guigeIndex].spName,
          goCla: this.goods.data.goCla,
          oDeliveryDate: this.goDeliveryDate,
          goCustomMade: this.goods.fruits ? 1 : 0,
          goMade: 0,
          haveSp: 1
        }
        this.$store.dispatch('frontend/cart/addCart', goods);
        this.$store.dispatch('global/toast', '加入购物车成功');
        this.hideModal();
      }
    },
    components: {
      Icon
    }
  }
</script>
<style rel="stylesheet/less" lang="less">
  .shop-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.4);
    z-index: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .shop-spec-modal{
    position: relative;
    width: 80%;
    background-color: #fff;
    border-radius: 10/75rem;
    overflow: hidden;
    .loading{
      text-align: center;
      padding: 30/75rem 0;
      img{
        width: 100/75rem;
        height: 100/75rem;
      }
    }
    .modal-header{
      padding: 38/75rem 25/75rem;
      .p-tit{
        text-align: center;
        font-size: 34/75rem;
        font-weight: bold;
        margin-bottom: 20/75rem;
      }
    }
    .dl {
      margin-bottom: 20/75rem;
      .dt {
        font-size: 26/75rem;
        line-height: 1;
        color: #7e7e81;

      }
      .dd {
        font-size: 30/75rem;
        line-height: 1;
        margin-top: .316rem;
      }
      &.flex {
        display: flex;
        align-items: center;
        .dt {
          flex: 1;
        }
        .dd {
          margin-left: 20/75rem;
          margin-top: 0;
        }
      }
      .label {
        display: inline-block;
        border: 1px solid #999;
        padding: .15em .3em;
        line-height: 1.5;
        border-radius: .2em;
        background-color: transparent;
        margin-right: .3em;
        font-size: 26/75rem;
        margin-bottom: .3em;
        &.select {
          background-color: #ffb230;
          border-color: #ffb230;
          color: #fff;
        }
      }
      .label-fruit{
        display: inline-block;
        padding: .2em .4em;
        line-height: 1.5;
        border-radius: .2em;
        background-color: #ffdda5;
        color: #f0f0f0;
        margin-right: .3em;
        margin-bottom: .3em;
        &.select {
          background-color: #ffb230;
          color: #fff;
        }
      }
    }
    .modal-bottom{
      height: 100/75rem;
      padding: 0 25/75rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fbfbfb;
      overflow: hidden;
      .p-price{
        font-size: 30/75rem;
        color: #ffb037;
      }
      .p-btn{
        width: 220/75rem;
        height: 66/75rem;
        text-align: center;
        line-height: 66/75rem;
        background-color: #ffb230;
        border: none;
        color: #fff;
        outline: none;
        &:active{
          background-color: lighten(#ffb230,10%);
        }
        &.disable{
          background-color: lighten(#ffb230,10%);
        }
      }

    }
    .p-close{
      position: absolute;
      right: 30/75rem;
      top: 30/75rem;
      svg{
        width: 40/75rem;
        height:40/75rem;
        fill: #999;
      }
    }
  }

</style>
